<script>
import FormParam from '@/components/form/FormParam.vue'

export default {
  components: { FormParam },
  _tip_: 'el-form-item组件的中间层',
  props: {
    label: String,
    error: String,
    required: Boolean,
    hidden: Boolean,
    remove: Boolean,
    item_style: [String, Object],

    // 以下为FormParam组件需要的参数
    component: String,
  },
  data(){
    return {
      this_error: this.error,
    }
  },
  methods: {
  },
  watch: {
    error(){
      this.this_error = this.error;
    },
  },
  computed: {
    is_required(){
      let validate = this.validate || [];
      return !!~validate.indexOf('required');
    },
  },
  mounted() {
  },
}
</script>

<template>
  <el-form-item
    class="form-item"
    :error="error"
    :required="required"
    :label="label"
    :style="item_style"
    v-show="!hidden"
    v-if="!remove"
  >
    <template v-if="$slots[component]">
      <!-- 和参数组件一样，把所有 $attrs 传给插槽，插槽里面如果需要更新 modelValue ，需要使用 onUpdate:modelValue(newValue) 方法。 -->
      <slot :name="component" v-bind="$attrs" ></slot>
    </template>
    <form-param
      v-else
      :component="component"
      v-bind="$attrs"
    ></form-param>
  </el-form-item>
</template>

<style scoped lang="scss">
.form-item{box-sizing: border-box;}
</style>